<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="./js/vue.js"></script>
  <style>
    .del {
      color: red;
      text-decoration: line-through;
    }

    li {
      list-style: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
      <input type="text" :value="title" @input="inputFn" @keyup="onenter">
    </div>
    <div>
      <ul>
        <li v-for="(item,index) of todos" :key="item.id">
          <span :class="{del:item.bool}">{{item.title}}</span> 
          <template v-if="!item.bool"><button @click="delTodo($event,index)">删除</button></template>
          <template v-else><button @click="delTodo($event,index)">恢复</button></template>
        </li>
      </ul>
    </div>

  </div>

  <script>
    let arr = []
    for (const key in sessionStorage) {
      if (isNaN(key)) continue
      arr.push(JSON.parse(sessionStorage[key]))
    }
    new Vue({
      el: '#app',
      data: {
        title: '',
        todos: arr,
        bool: true
      },
      methods: {
        inputFn(evt) {
          this.title = evt.target.value.trim()
        },
        onenter(evt) {
          if (evt.key === 'Enter') {
            // push它是vue重构一个数组对象的方法，调用它会触发视图更新

            if (!this.title) return alert("不能为空！")
            if (/^(admin)|(user)/.test(this.title)) {
              return alert("不能输入admin或者user相关关键词！")
            } else {
              let bool = this.todos.some(t => {
                return t.title == this.title
              })
              if (!bool) {
                let obj = {
                  id: Date.now(),
                  title: this.title,
                  bool: false
                }
                this.todos.push(obj)
                sessionStorage.setItem(obj.id, JSON.stringify(obj))
                this.title = ''
              } else {
                return alert("不能重复！")
              }

            }
          }
        },
        delTodo(elem, index) {
          // delTodo(index) {
          this.todos[index].bool = !this.todos[index].bool
          sessionStorage.setItem(this.todos[index].id, JSON.stringify(this.todos[index]))

        }

      }

    })
  </script>
  <!-- Code injected by live-server -->
  <script type="text/javascript">
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
      (function () {
        function refreshCSS() {
          var sheets = [].slice.call(document.getElementsByTagName("link"));
          var head = document.getElementsByTagName("head")[0];
          for (var i = 0; i < sheets.length; ++i) {
            var elem = sheets[i];
            var parent = elem.parentElement || head;
            parent.removeChild(elem);
            var rel = elem.rel;
            if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
              var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
              elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
            }
            parent.appendChild(elem);
          }
        }
        var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
        var address = protocol + window.location.host + window.location.pathname + '/ws';
        var socket = new WebSocket(address);
        socket.onmessage = function (msg) {
          if (msg.data == 'reload') window.location.reload();
          else if (msg.data == 'refreshcss') refreshCSS();
        };
        if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
          console.log('Live reload enabled.');
          sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
        }
      })();
    } else {
      console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>
  </script>
</body>

</html>